<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>hello Vue</title>
</head>
<body>
<div id="app">
    <!-- v-bind 动态地绑定一个或者多个attribute（属性） -->
    <!-- 最简单的使用，直接给id赋值，如果要修改id的值，只要修改app.data.id就行了 -->
    <div v-bind:id="idValue">你好</div>
    <button @click="changeImgUrl">切换照片</button>
    <br/>
    <!-- 最常见的图片展示，我们图片一般都是存在服务器，这时候这个动态绑定就变成很简单实现了 -->
    <img v-bind:src="srcUrl1">
    <!-- 因为属性动态绑定也是比较常用的指令，Vue也提供缩写(:)代表(v-bind:) -->
    <img :src="srcUrl1">
    <br/>
    <!--disabledVal值是 null、undefined 或 false，则 disabled attribute 甚至不会被包含在渲染出来的 <button> 元素中，其他值都会当成是true-->
    <button v-bind:disabled="disabledVal1">按钮1</button>
    <button v-bind:disabled="disabledVal2">按钮2</button>
    <button v-bind:disabled="disabledVal3">按钮3</button>
    <button v-bind:disabled="disabledVal4">按钮4</button>
    <button v-bind:disabled="disabledVal5">按钮5</button>
    <!-- v-bind是多少属性都是可以使用,比如class,id,style，就自己怎么灵活应用了 -->
</div>
</body>
<script src="../../css/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            idValue: 'id1',
            srcUrl1: "../../img/粉红色.png",
            srcUrl2: "../../img/绿色.png",
            disabledVal1: true,
            disabledVal2: "hello",
            disabledVal3: undefined,
            disabledVal4: null,
            disabledVal5: false,
        },
        methods:{
            changeImgUrl: function () {
                let url = this.srcUrl1;
                this.srcUrl1 = this.srcUrl2;
                this.srcUrl2 = url;
            }
        }
    });
</script>
</html>
